<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件捕获</title>
        <style>
            h3 { text-align: center ;}
            .outer, 
            .middle , 
            .inner {
                border: 2px solid transparent ;
            }
            .outer {  width: 300px ;  height: 300px ; margin: auto ; border-color: blue ; }
            .middle {  width: 200px ;  height: 200px ; margin: 50px ; border-color: green ; }
            .inner {  width: 100px ;  height: 100px ; margin: 50px ; border-color: red ; }
        </style>
    </head>
    <body>
        <h3>事件捕获</h3>
        <div class="outer">
            <div class="middle">
                <div class="inner"></div>
            </div>
        </div>

        <script type="text/javascript">
            let outer = document.querySelector( '.outer' );
            let middle = document.querySelector( '.middle' );
            let inner = document.querySelector( '.inner' );

            const type = 'click' ;
            const listener = function( event ){
                let t = event.target ;
                console.log( 'target: ' , t , ' this:' , this );
            }
            const capture = true ; // true 表示捕获阶段处理事件

            inner.addEventListener( type , listener , capture );
            middle.addEventListener( type , listener , capture );
            outer.addEventListener( type , listener , capture );
        </script>
        
    </body>
</html>